<template>
	<view>
		<view v-if="id">
			<tn-list-view :card="true" unlined="top" v-if="caseStaticInfo.length">
				<tn-list-cell v-for="li in caseStaticInfo" :key="li.name">
					<text class="cell-left">{{ li.name || '无' }}：</text>
					<text class="cell-right">
						{{ caseData[li.prop] || '无' }}
					</text>
				</tn-list-cell>
			</tn-list-view>
			<view class="form-container">
				<template v-if="formSetInfo.length">
					<tn-form :model="form" ref="form" :borderBottom="false">
						<tn-form-item v-for="item in formSetInfo" labelPosition="top" :label="item.name" :prop="item.prop" :key="item.prop">
			
							<view v-if="item.name.includes('是否')" class="hide-border">
								<tn-radio-group v-model="form[item.prop]" @change="(e) => radioGroupChange(item.prop, e)">
									<tn-radio v-for="(itemv, index) in list" :key="index" :name="itemv.value">
										{{ itemv.name }}
									</tn-radio>
								</tn-radio-group>
							</view>
			
							<view class="hide-border" v-else-if="item.name.includes('满意程度')">
								<tn-radio-group v-model="form[item.prop]" @change="(e) => radioGroupChange(item.prop, e)">
									<tn-radio v-for="(itemv, index) in satisfactionValueList" :key="index" :name="itemv.value">
										{{ itemv.name }}
									</tn-radio>
								</tn-radio-group>
							</view>
							
							<tn-input
								type="select"
								v-model="form[item.prop]"
								:selectOpen="huifangShow"
								@click="
									() => {
										(type = item.prop), (huifangShow = true);
									}
								"
								v-else-if="item.name.includes('回访人的姓名')"
								:placeholder="'请选择' + item.name"
							></tn-input>
			
							<tn-input v-else-if="item.name === '回访详情'" type="textarea" v-model="form[item.prop]" :placeholder="'请输入' + item.name" />
			
							<tn-input v-else v-model="form[item.prop]" :placeholder="'请输入' + item.name" />
						</tn-form-item>
					</tn-form>
				</template>
				<!-- 回访人员select -->
				<view v-show="huifangShow">
					<tn-select v-model="huifangShow" mode="single" :list="userList" @confirm="huifangConfirm"></tn-select>
				</view>
			
				<tn-button v-if="!caseData.hasVisit" style="margin-top: 0.8rem" fontColor="#ffffff" @click="postData()" backgroundColor="#3D7EFF" width="100%">保存</tn-button>
			</view>
		</view>
		<view class="detail-empty" v-else>
			 <tn-empty mode="cart" icon="empty-search" iconColor="#CC5A36" text="未取到信息,请返回重试!"></tn-empty>
		</view>
	</view>
</template>

<script>
import { onMounted } from 'vue';
import { caseList, getVisitList, editVisit, addVisit } from '@/api/visit.js';
import { visitForm } from './utils/dict.js';
import { caseDetailLib } from './utils/dict.js';
import { convertObjectValuesToString } from '@/utils/formatData.js';

export default {
	data() {
		return {
			type: '',

			huifangShow: false,
			userList: [],

			hasVisit: false,

			id: '',
			form: {
				code: '',
				caseId: '',
				departId: '',
				executeId: '',
				executeName: '',
				detail: '',
				receivedTable: '1',
				jineReasonable: '1',
				jineEqual: '1',
				hasInvoice: '1',
				visitSuccess: '1',
				scoreValue: '',
				satisfactionValue: '1',
				lastPhone: '',
				dealTime: ''
			},
			formSetInfo: [],
			list: [
				{
					name: '是',
					value: '1'
				},
				{
					name: '否',
					value: '0'
				}
			],
			satisfactionValueList: [
				{
					name: '满意',
					value: '1'
				},
				{
					name: '不满意',
					value: '0'
				},
				{
					name: '电话无人接听',
					value: '3'
				}
			],
			caseData: {},
		};
	},
	onLoad(options) {
		this.getCaseDetail()
		this.getUserList()
		this.setFormKey()
		
		this.id = options.id;
		// if (options.hasVisit === '1') {
		if (this.id) {
			this.getVisitRecord();
		} else {
			console.log('未获取到案件id');
		}
	},
	methods: {
		getCaseDetail(){
			uni.getStorage({
				key: 'ANJIANINFO',
				success: (res) => {
					this.caseData = res.data;
					this.form.lastPhone = this.caseData.reporterTel;
				}
			});
			
			const arr = [];
			caseDetailLib.forEach((item) => {
				if (item.name === '当事人' || item.name === '电话' || item.name === '案件描述') {
					arr.push(item);
				}
				if (item.name === '发生时间' && !this.caseData.hasVisit) {
					arr.push(item);
				}
			});
			
			if (this.caseData.hasVisit) {
				arr.push({ name: '办结时间', prop: 'recorderTime' })
			}
			
			this.caseStaticInfo = [...[], ...arr];
		},
		huifangConfirm(event) {
			this.form[this.type] = event[0].label;
		},
		radioGroupChange(type, event) {
			this.form[type] = event;
		},
		setTitle(title) {
			uni.setNavigationBarTitle({
				title: title,
				success: () => {
					console.log('标题设置成功');
				},
				fail: (err) => {
					console.log('标题设置失败', err);
				}
			});
		},
		getVisitRecord() {
			console.log('id',this.id);
			getVisitList({
				id: this.id
			})
				.then((res) => {
					if (res) {
						const obj = convertObjectValuesToString(res.data);
						// if (this.hasVisit === '1'){
							this.form = { ...this.form, ...obj };	
						// }else{
						// 	this.form = { ...this.form, id: obj.id };
						// }
					}
				})
				
		},
		postData() {
			editVisit({ ...this.form, caseId: this.id,code: this.caseData.caseName, params: null })
				.then((res) => {
					uni.navigateBack({
						delta: 2
					})
				})
		},
		getUserList(){
			uni.getStorage({
				key: 'USERLIST',
				success: (res) => {
					this.userList = [...[], ...res.data];
				}
			});
		},
		setFormKey(){
			this.formSetInfo = [...[], ...visitForm];
		}
	}
};
</script>
<style lang="scss" scoped>
.form-container {
	padding: 0.5rem 1rem;
	::v-deep {
		.tn-form-item {
			padding: 10px 0 0;
			border-bottom-width: 0px !important;
			input,
			.uni-textarea-textarea,
			.tn-input__text {
				padding: 0px 10px;
				min-height: 35px;
			}
			.uni-textarea-placeholder {
				font-size: 32rpx;
				padding: 0px 10px;
			}
		}
		.tn-form-item--right {
			border: 1px solid #ccc;
			border-radius: 5px;
		}

		.tn-form-item--right:has(.hide-border) {
			border: 0px;
			border-radius: 0;
			padding-left: 0.5rem;
			border-bottom: 1px solid #ccc;
		}
	}
}
.cell-right {
	font-size: 32rpx;
	color: #666;
}
</style>
